import React from 'react';
import { Form, Row, Col, Button, Input, Icon } from 'antd';
import { Link } from 'umi';
import authHelper from '@/utils/auth/helper';
import { eventTrack } from '@/utils/track';
import { PostSelector, GradeSelector } from '../index';

const { checkCode } = authHelper;
const SearchForm = ({ form, query = {}, setQuery }) => {
    const { getFieldDecorator } = form;
    const [collapsed, setCollapsed] = React.useState(true);

    // 这个暂时不做关联
    // const gradeCompanyId = form.getFieldValue('companyId') || companyId;
    const getRankCodeList = () => {
        if (!query.rankCodeList || (Array.isArray(query.rankCodeList) && !query.rankCodeList[0])) return undefined;
        return String(query.rankCodeList).split(',');
    };
    const getPositionCodes = () => ({
        first: query.firstPositionCode,
        second: query.secondPositionCode
    });
    return (
        <Form layout="inline">
            <Row type="flex" align="middle" justify="space-between">
                <Col>
                    <Form.Item label="">
                        {getFieldDecorator('positionName', {
                            initialValue: query.positionName
                        })(<Input placeholder="输入职位名称" style={{ width: 300 }} allowClear />)}
                    </Form.Item>
                    {checkCode('office:orgs:post:query') && (
                        <Form.Item>
                            <Button
                                type="primary"
                                onClick={() => {
                                    const values = form.getFieldsValue();
                                    // 埋点
                                    eventTrack({
                                        eventName: 'organization_job_search_click',
                                        eventProps: { key_works: values.positionName }
                                    });
                                    const { positionCodes = {}, rankCodeList = [], ...params } = values;
                                    console.log('---------------------------------------------', values);
                                    const extraQuery = {
                                        ...params,
                                        positionTypeCode: positionCodes.second
                                            ? positionCodes.second
                                            : positionCodes.first,
                                        rankCodeList
                                    };
                                    setQuery({ ...query, ...extraQuery, current: 1 });
                                }}
                            >
                                搜索
                            </Button>
                        </Form.Item>
                    )}
                    <Form.Item>
                        <a
                            href="#"
                            onClick={e => {
                                e.preventDefault();
                                setCollapsed(!collapsed);
                            }}
                        >
                            {collapsed ? '展开' : '收起'}
                            <Icon type={collapsed ? 'caret-down' : 'caret-up'} />
                        </a>
                    </Form.Item>
                </Col>
                <Col>
                    {checkCode('office:orgs:post:add') && (
                        <Form.Item>
                            <Link
                                to={{
                                    pathname: '/office/personnelManagement/organization/job/edit'
                                }}
                            >
                                {/* 埋点 */}
                                <Button
                                    type="primary"
                                    onClick={() => {
                                        eventTrack({
                                            eventName: 'organization_job_add_click'
                                        });
                                    }}
                                >
                                    添加职位
                                </Button>
                            </Link>
                        </Form.Item>
                    )}
                    {/* <Form.Item>
                        <Button type="primary">导出职位</Button>
                    </Form.Item> */}
                </Col>
            </Row>
            <Row
                type="flex"
                align="middle"
                justify="space-between"
                style={{ marginTop: 8, display: collapsed ? 'none' : 'block' }}
            >
                <Form.Item label="职位类别">
                    {getFieldDecorator('positionCodes', {
                        initialValue: getPositionCodes()
                    })(<PostSelector form={form} style={{ width: 300 }} />)}
                </Form.Item>
                <Form.Item label="职级">
                    {getFieldDecorator('rankCodeList', {
                        initialValue: getRankCodeList()
                    })(<GradeSelector mode="multiple" maxTagCount={1} style={{ width: 200 }} />)}
                </Form.Item>
            </Row>
        </Form>
    );
};
export default SearchForm;
